<template>
  <div class="right-card">
    <m-card :width="439" :height="243" title="合规建设">
      <!-- <div class="population-proportion">
        <div class="population-proportion-chart">
          <v-chart ref="vChart" :option="option" :autoresize="true" />
          <div class="label-name">消费占比</div>
        </div>
        <div class="pie-legend">
          <div class="pie-legend-item" v-for="(item, index) in state.pieData" :key="index">
            <div class="icon" :style="{ borderColor: state.pieDataColor[index] }"></div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}<span class="unit">%</span></div>
          </div>
        </div>
      </div> -->
      <div class="hgjs_group">
        <div class="hgjs_group_item" v-for="(item,index) in pageData.hgData" :key="'hg'+index">
          <div class="hgjs_group_item_title" :style="{background:`url(${item.icon})`}">
            <span class="item-title-text">{{item.title}}</span>
          </div>
          <div class="hgjs_group_item_exam">
            <div class="hgjs_group_item_exam_title">
              {{item.exam1_title}}
            </div>
            <div class="hgjs_group_item_exam_value">
              {{item.exam1_value}}
              <span class="hgjs_group_item_exam_unit">{{item.exam1_unit}}</span>
            </div>
          </div>
          <div class="hgjs_group_item_exam">
            <div class="hgjs_group_item_exam_title">{{item.exam2_title}}</div>
            <div class="hgjs_group_item_exam_value">
              {{item.exam2_value}}
              <span class="hgjs_group_item_exam_unit">{{item.exam2_unit}}</span>
            </div>
          </div>
        </div>
      </div>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue"
import * as echarts from "echarts"
import mCard from "@/components/mCard/index.vue"
import VChart from "vue-echarts"
import zdjsIcon from '@/assets/images/map/zdjs_icon.png'
import hgpxIcon from '@/assets/images/map/hgpx_icon.png'
import xmscIcon from '@/assets/images/map/xmsc_icon.png'
const pageData = reactive({
  hgData:[
    {
      icon:zdjsIcon,
      title:"制度建设",
      exam1_title:"制度总数",
      exam1_value:59,
      exam1_unit:"个",
      exam2_title:"近6个月更增/增加",
      exam2_value:753,
      exam2_unit:"个",

    },
    {
      icon:hgpxIcon,
      title:"合规培训",
      exam1_title:"本年合规培训",
      exam1_value:30,
      exam1_unit:"个",
      exam2_title:"培训人次",
      exam2_value:525,
      exam2_unit:"个",

    },
    {
      icon:xmscIcon,
      title:"项目审查",
      exam1_title:"重大项目审查",
      exam1_value:59,
      exam1_unit:"个",
      exam2_title:"常规项目审查",
      exam2_value:85,
      exam2_unit:"个",

    }
  ]
})
const state = reactive({
  pieDataColor: ["#17E6C3", "#40CFFF", "#1979FF", "#FFC472"],
  pieData: [
    {
      name: "类型1",
      value: 40,
    },
    {
      name: "类型2",
      value: 25,
    },
    {
      name: "类型3",
      value: 20,
    },
    {
      name: "类型4",
      value: 15,
    },
  ],
})
const option = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: { opacity: 0 },
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 10,
    },
  },

  series: [
    {
      name: "",
      type: "pie",
      itemStyle: {
        borderWidth: 5,
        borderColor: "rgba(26, 57, 77,1)",
      },
      label: { show: false },
      radius: ["55%", "70%"],
      color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],

      data: [
        {
          value: 40,
          name: "类型1",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(3,65,128,1)" },
              { offset: 1, color: "rgba(115,208,255,1)" },
            ]),
          },
        },
        {
          value: 25,
          name: "类型2",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(11, 77, 44, 1)" },
              { offset: 1, color: "rgba(77, 255, 181, 1)" },
            ]),
          },
        },
        {
          value: 20,
          name: "类型3",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(117, 117, 117, 1)" },
              { offset: 1, color: "rgba(230, 230, 230, 1)" },
            ]),
          },
        },
        {
          value: 15,
          name: "类型4",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(153, 105, 38, 1)" },
              { offset: 1, color: "rgba(255, 200, 89, 1)" },
            ]),
          },
        },
      ],
    },
  ],
})

</script>
<style lang="scss">
.population-proportion {
  display: flex;
  height: 100%;
  &-chart {
    position: relative;
    width: 180px;
    height: 100%;
    margin-left: 15px;
    background: url("~@/assets/images/pie/pie-zs-bg.png") no-repeat;
    background-size: cover;
    .label-name {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 72px;
      height: 72px;
      margin-left: -36px;
      margin-top: -36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #c4e3fd;
    }
    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      margin-left: -36px;
      margin-top: -36px;
      content: "";
      width: 72px;
      height: 72px;
      background: url("~@/assets/images/pie/pie-mid-circle.png") no-repeat;
      background-size: cover;
      animation: rotate360Animate 2s linear infinite;
    }
  }
  .pie-legend {
    padding-left: 30px;
  }
}
.hgjs_group{
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  position: relative;
  
  .hgjs_group_item{
    width: 121px;
    height: 170px;
    
    position: relative;
    .hgjs_group_item_title{
      width: 100%;
      height: 37px;
      background-size: 100% 100%;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 37px;
      letter-spacing: 1px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .item-title-text{
        padding-left: 46px;
      }
    }
    .hgjs_group_item_exam_title{
      font-weight: 400;
      font-size: 12px;
      color: #D2E6FF;
      line-height: 17px;
      text-align: center;
      margin-top: 17px;
    }
    .hgjs_group_item_exam_value{
      font-weight: 600;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 25px;
      text-align: center;
    }
    .hgjs_group_item_exam_unit{
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 17px;
      letter-spacing: 1px;
      text-align: center;
    }
  }
}
.hgjs_group::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( 180deg, #112F5F 0%, rgba(8,58,123,0.68) 100%);
  opacity: 0.2;
  z-index: -1;
  
}
.hgjs_group_item::after{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.5;
    background: linear-gradient(  rgba(15,55,115,0) 0%, #0F3D82 50%, rgba(15,55,115,0) 100%);
    border: 1px solid;
    border-image: linear-gradient(360deg, rgba(77, 141, 202, 0), rgba(62, 133, 202, 1), rgba(63, 134, 202, 0)) 1 1;
    z-index: -1;
  }
</style>
